<template>
	<view class="allview">
		<view class="my-content">
			<view class="toptop">
				详情
			</view>
			<mylines></mylines>
			<view class="all" >
				<view class="content-left">
					<view class="left-img" @tap="handleCrop(detailuser.imgurl)">
						<image  :src="`${baseurl}${detailuser.imgUrl}`" class="img"></image>
					</view>
					<view class="content-leftname">
						<h3 class="">
							{{detailuser.nickname}}
						</h3>
						<view class="content-leftnews">
							{{detailuser.news}}
						</view>
					</view>
				</view>
			</view>
			<mylines></mylines>
			<view class="">
				<button class="addfriend" @click="" v-if="1">加为好友</button>
				<button style="color: #ffd661;" @click="" v-else>发送消息</button>
			</view>
			<view class="threebox">
				<view class="threeboxitem" v-for="(item,index) in boxmsg" :key="item.id" @tap="getcontentlist(item.id)">
					<view class="" @tap="tapitem(item.id)">
						<image class="threeimg" :src="item.imgurl" mode=""></image>
						<view class="threetitle">
							{{item.title}}
						</view>
						<view class="threeeng">
							{{item.engtitle}}
						</view>
					</view>
				</view>
			</view>
			<mylines></mylines>
			<view class="my-content-list" v-for="(item,index) in updatedListtop" :key="item.id" >
				<view class="my-content-item" >
					<view class="content">
						<view class="text">
							<view class="title">
								{{item.title}}:
							</view>
							
							<view class="content">
								{{item.content}}
							</view>
						</view>
					</view>
					<view class="imgs">
						<image class="img" src="../../static/tabBar/right.png" mode=""></image>
					</view>
				</view>
				<mylines></mylines>
			</view>
		</view>
		<view class="example-body">
			<button type="primary" @click="showDrawer('showLeft')"></button>
			<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
				<view class="close">
					<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭</text></button>
					<uni-list>
						<uni-list-item v-for="(item,index) in computedfriendresult" :key="index" ellipsis="2" :title="item.news" :rightText="index+''" />
					</uni-list>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import mylines from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	import uninavbar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				showLeft: false,
				baseurl:"https://zyc618.mynatapp.cc",
				detailuser:{},//获取信息信息数据
				friendID:0,
				computedfriendresult:[],//相同的好友
				listtop: [
					{
						id: 2,
						title: "性别",
						bind:"sex"
					},
					{
						id: 3,
						title: "邮箱",
						bind:"email"
					},
					{
						id: 4,
						title: "地区",
						bind:"arce"
					},
					{
						id: 5,
						title: "手机号码",
						bind:"phone"
					},
					{
						id: 6,
						title: "生日",
						bind:"birthday"
					},
					
				],
				boxmsg:[{
					id:0,title:"提?箱",engtitle:"box to drop your suggestions in",imgurl:"../../static/tabBar/search/askquestion.png"
				},{
					id:1,title:"亲密关系",engtitle:"Have Each Other's Backs",imgurl:"../../static/tabBar/search/Intimaterelationship.png"
				},{
					id:2,title:"分享圈",engtitle:"Sharing Circle",imgurl:"../../static/tabBar/search/friendshare.jpg"
				}]
			};
		},
		components: {
			mylines,uninavbar,
		},
		onReady() {
			//获取数据
			
		},
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo
			}),
			// 计算属性动态匹配:
			updatedListtop() {
			      return this.listtop.map(item => {
			             const bindValue = item.bind;
			             const detailValue = this.detailuser[bindValue];
			             // 返回包含 content 属性的新对象
			             return { ...item, content: detailValue || '******' };
			           });
			    }
		},
		methods:{
			//返回函数:
			goback(){
				this.isShow = false
			},
			//点击图片放大:
			handleCrop(e) {
				uni.previewImage({
					urls: [e.tempFilePath],
					current: 0
				});
			},
			//获取好友数据:
			userdetail(index){
				$http.request({
					url: "/user/detail",
					method: "POST",
					data: {
						userid: index,
					}
				}).then((res) => {
					
					if(res.code == 200){
						this.detailuser=res.data;
					}else{
						uni.showToast({
							title:"用户异常",
							during:2500,
							mask:true,
							icon:"error"
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			tapitem(index){
				console.log(index);
			},
			//计算有多少个相同的好友:
			computedfriend(){
				$http.request({
					url:"/computedfriend",
					method:"post",
					data:{
						userID:this.userInfo.id,
						friendID:this.friendID
					}
				}).then((res)=>{console.log(res);
					if(res.code===200){
						this.computedfriendresult = res.data;
						this.showDrawer('showLeft')
					}
				}).catch((err)=>{
					
				})
			},
			//3个磨合:
			getcontentlist(index){
				if(index == 0){
					uni.navigateTo({
						url:`/pages/anonymousquestion/anonymousquestion?friendID=${this.friendID}&nickname=${this.detailuser.nickname}`
					})
				}else if(index ==1){
					//一共有多少个人相同的好友
					this.computedfriend();
					this.$nextTick(()=>{
						
					})
				}else{
					
				}
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			}
		},
		onLoad(e){
			if(e.friendID){
				this.friendID = e.friendID
				this.userdetail(e.friendID)
			}
			
		}
	}
</script>

<style lang="scss">
	
	.allview{
		position: relative;
		height: 100hv;
		padding-bottom: 120rpx;
	}
	.threebox{
		display: flex;
		justify-content: space-around;
		align-items: center;
		.threeboxitem{
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 5rpx;
			width: 25%;
			.threeimg{
				width: 60rpx;
				height: 60rpx;
			}
			.threetitle{
				font-size: $uni-font-size-sm;
			}
			.threeeng{
				color: $uni-color-paragraph;
				font-size: 9px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		
	}
	.addfriend{
		background-color: #00a8df;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: $uni-font-size-sm;
		color: #fff;
		width: 95%;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		margin: 3%;
	}
	.my-content {
		.toptop{
			padding: 20rpx;
			
		}
		.all {
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.content-left {
				padding: 10rpx;
				display: flex;
				align-items: center;
				height: 150rpx;
				.left-img {
					
					border: 2rpx solid #cebfb3;
					border-radius: 100rpx;
					overflow: hidden;
					display: flex;
					margin: 0 10rpx;
					.img {
						width: 150rpx;
						height: 150rpx;
						
					}
				}
				.content-leftname{
					width: 70%;
					font-weight: 600;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					.content-leftnews{
						
						font-size: 9px;
						color: $uni-color-paragraph;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
				}
				
			}
		
		}
		
		.my-content-list {
			.my-content-item {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				margin: 20rpx 0;
				font-size: $uni-font-size-lg;
				.content {
					display: flex;
					.text {
						line-height: 56rpx;
						font-size: $uni-font-size-base;
						color: $uni-text-color-grey;
						line-height: 40rpx;
						display: flex;
						align-items: center;
						.title{
							padding-right: 25rpx;
						}
						.content{
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
				}

				.imgs {
					padding: 10rpx;
					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}

			}
		}
	}
	
	.content-button {
		background-color: #00a8df;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30rpx;
		font-weight: 800;
		text-align: center;
	}
	
	
	.reserva-detal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		.pop-mask {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 30%;
			background-color: rgba(0, 0, 0, .6);
		}
	
		.pop-box {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 70%;
			background-color: rgba(255, 255, 255, .98);
			.inptop {
				display: flex;
				font-size: $uni-font-size-lg;
				padding: 30rpx;
				
			}
		}
	}
	
</style>